<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="icon" type="image/x-icon" href="/logo.ashx?logotype=3" />

    <title>Offline</title>

    <style type="text/css">
      body {
        height: 100%;
        margin: 0;
        padding: 0;
        width: 100%;
        font-family: "Open Sans", sans-serif;
        font-size: 13px;
        -webkit-font-smoothing: antialiased;
      }

      .offline-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, max-content);
        justify-items: center;
      }

      .offline-img-container {
        padding-top: 20px;
      }

      .offline-img {
        width: 150px;
        height: 106px;
      }

      .offline-disclaimer {
        padding-top: 25px;
      }

      .offline-title {
        font-weight: 700;
        font-size: 19px;
        line-height: 24px;
      }

      .offline-reload {
        padding-top: 40px;
      }

      .offline-reload-button {
        background: #2da7db;
        border-radius: 3px;
        padding: 8px 16px;
        color: white;
        font-weight: 600;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <div class="offline-container">
      <div class="offline-img-container">
        <img src="/offline/offline.svg" alt="offline" class="offline-img" />
      </div>
      <div class="offline-disclaimer">
        <span class="offline-title">No internet connection</span>
      </div>
      <div class="offline-reload">
        <a class="offline-reload-button" href="/">Reload page</a>
      </div>
    </div>
  </body>
</html>
